<template>
	<view class="main">
		<u-navbar bgColor="#ffffff00" title="" :placeholder="true" @rightClick="rightClick" :autoBack="true">
			<template v-slot:left>
				<view class="xflex-x">
					<image class="fh" src="/pagesA/static/images/fanhui.png" mode=""></image>
					<view class="fhtext">
						订单统计
					</view>
				</view>
			</template>
			

		</u-navbar>
		
		<view class="xmb24">
			<view class="price xflex-x-center xmt50">
				<view class="price-item xflex-y-center">
					<view class="price-Num">
						12
					</view>
					<view class="price-Text">
						今日订单
					</view>
				</view>
				<view class="price-item xflex-y-center">
					<view class="price-Num">
						12
					</view>
					<view class="price-Text">
						今日订单
					</view>
				</view>
			</view>
			
			<view class="xflex-x-around xmt50">
				<view class="money">
					累计订单(笔）<text>1548</text>
				</view>
				<view class="money">
					营业额(元）<text>1548</text>
				</view>
			</view>
		</view>
		
		<view class="order">
			<view class="xflex-x-between">
				<view class="order-title">
					订单数据
				</view>
				<view class="order-time">
					12月16日-12月17日
				</view>
			</view>
			<view class="xflex-x xmt32 ">
				<view class="order-span xmr20 active" v-for="item in 3">
					双床房
				</view>
			</view>
		</view>
		
		<view class="room xmt24">
			<view class="room-item xflex-x xbgf">
				<image class="room-img xmr24" src="" mode=""></image>
				<view class="room-box xflex-y-between">
					<view class="room-title">
						豪华大床房
					</view>
					<view class="room-price">
						￥6826.84
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.main {
		 background: linear-gradient(to bottom, #0CB0FD 0%, #0CB0FD 500rpx, #f5f5f5 400rpx, #f5f5f5 100%); 
		height: 100%;
	}
	
	.fh {
		width: 36rpx;
		height: 36rpx;
		margin-right: 17rpx;
	}
	.fhtext {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #F5F5F5;
	}
	
	.price {
		
		&-Num {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 60rpx;
			color: #FFFFFF;
		}
		&-Text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 30rpx;
		}
		
		&-item {
			padding: 0 137rpx;
			// border-right: 1rpx solid #eee;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				display: block;
				width: 1rpx;
				height: 60rpx;
				background: #FFFFFF50;
				right: 0;
				&:last-child{
					width: 0;
				}
			}
			
		}
		
		
	}
	
	.money {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		&>text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	
	.order{
		width: 750rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 0 20rpx;
		padding: 21rpx 33rpx;
		box-sizing: border-box;
		
		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
		
		&-time {
			width: 305rpx;
			height: 58rpx;
			background: #F3F3F3;
			border-radius: 5rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			line-height: 58rpx;
		}
		&-span {
			width: 140rpx;
			height: 58rpx;
			border-radius: 29rpx;
			border: 1px solid #CCCCCC;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			line-height: 58rpx;
		}
		
		.active {
			background: #F2FAFF !important;
			border-radius: 29rpx !important;
			border: 1px solid #0CB0FD !important;
		}
	}
	
	.room{
		
		&-item {
			padding: 24rpx 30rpx;
			
		}
		&-img {
			width: 150rpx;
			height: 150rpx;
			background: #EEEEEE;
			border-radius: 14rpx;
		}
		&-box {
			height: 150rpx;
		}
		&-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
		}
		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #E73A3A;
		}
	}
	
</style>